<title>商品详情页</title>
{% extends 'base.html' %}
{% block content %}
    {% load static %}
    {% load mptt_tags %}
    <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.css' %}">
    <script>
        function atc() {
            $(document).ready(function () {
                $("#myModal").modal();
            });
        }
    </script>
    <br>
    {#    提示框#}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">商品添加</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>商品添加购物车成功</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    {#    商品信息#}
    <div class="row">
        <h4 style="font-size: 20px">{{ pro.p_name }}</h4>
    </div>
    <hr class="hstyle2">
    <div class="row">
        <div class="col-sm-12" align="center">
            <img src="{{ url }}" width="500" height="500" alt="">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" align="center">
            <br>
            <h5 id="slogan">价格:&emsp;{{ pro.p_price }}元</h5>
            <div class="card-footer">
                <span>
                    <small class="col align-self-end">
                        浏览: {{ pro.p_total_views }}
                    </small>
                </span>
            </div>
            {% if user.is_authenticated %}
                <a name="AddToCart" class="btn btn-primary" id="addtocart"
                   href="{% url 'store:addToCart' product_id=pro.id username=user.username %}" onclick="atc()">加入购物车</a>
            {% endif %}

        </div>
    </div>
    <hr>
    {% if user.is_authenticated %}
        <div>
            <form action="{% url 'comment:post_comment' pro.id %}" method="POST">
                {% csrf_token %}
                <div class="form-group">
                    <label for="body">
                        <strong>
                            我也要发言：
                        </strong>
                    </label>
                    <div>
                        {{ comment_form.media }}
                        {{ comment_form.content }}
                    </div>
                </div>
                <button type="submit" class="btn btn-primary ">发送</button>
            </form>
        </div>
        <br>
    {% else %}
        <br>
        <h5 class="row justify-content-center">请<a href="{% url 'store:login' %}?next={{ request.path }}">登录</a>后回复</h5>
        <br>
    {% endif %}
    <h4>共有{{ comments.count }}条评论</h4>
    <div class="row">
        <!-- 遍历树形结构 -->
        {% recursetree comments %}
            <!-- 给 node 取个别名 comment -->
            {% with comment=node %}
                <div class="{% if comment.reply_to %}
                        offset-1 col-11
                        {% else %}
                        col-12
                        {% endif %}">
                    <hr>
                    <p>
                        <strong style="color: pink">
                            {{ comment.user }}
                        </strong>
                        {% if comment.reply_to %}
                            <i class="fa fa-arrow-circle-right fa" aria-hidden="true"
                               style="color: cornflowerblue; "></i>
                            <strong style="color: pink">
                                {{ comment.reply_to }}
                            </strong>
                        {% endif %}
                    </p>
                    <div>{{ comment.content|safe }}</div>
                    <div>
                    <span style="color: gray">
                        {{ comment.created|date:"Y-m-d H:i" }}
                    </span>
                        <!-- 加载 modal 的按钮 -->
                        {% if user.is_authenticated %}
                            <button type="button"
                                    class="btn btn-light btn-sm text-muted"
                                    onclick="load_modal({{ pro.id }}, {{ comment.id }})">
                                回复
                            </button>
                        {% else %}
                            <a class="btn btn-light btn-sm text-muted"
                               href="{% url 'store:login' %}">
                                回复
                            </a>
                        {% endif %}
                    </div>
                    <!-- Modal -->
                    <div class="modal fade"
                         id="comment_{{ comment.id }}"
                         tabindex="-1"
                         role="dialog"
                         aria-labelledby="CommentModalCenter"
                         aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                            <div class="modal-content" style="height: 480px">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalCenterTitle">回复 {{ comment.user }}：</h5>
                                </div>
                                <div class="modal-body" id="modal_body_{{ comment.id }}"></div>
                            </div>
                        </div>
                    </div>
                    {% if not comment.is_leaf_node %}
                        <div class="children">
                            {{ children }}
                        </div>
                    {% endif %}
                </div>
            {% endwith %}
        {% endrecursetree %}
    </div>
    <footer class="footer bg-light">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h6 class="footer-header">为你推荐</h6>
                </div>
                <div class="row">
                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="row">
                                    {% for r in recItems %}
                                        <div class="col-sm-3" align="center">
                                            <a href="{% url 'store:product' product_id=r.id %}" target="_blank">
                                                <img src="{{ r.p_url }}" alt="First slide"
                                                     style="width: 200px; height: 250px;">
                                            </a>
                                            <h6>{{ r.p_name }}</h6><h6>价格: {{ r.p_price }}元</h6></div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <script>
        $(".django-ckeditor-widget").removeAttr('style');
    </script>
    <!-- 新增代码，唤醒二级回复的 modal -->
    <script>
        // 加载 modal
        function load_modal(product_id, comment_id) {
            let modal_body = '#modal_body_' + comment_id;
            let modal_id = '#comment_' + comment_id;

            // 加载编辑器
            if ($(modal_body).children().length === 0) {
                let content = '<iframe src="/comment/post-comment/' +
                    product_id +
                    '/' +
                    comment_id +
                    '"' +
                    ' frameborder="0" style="width: 100%; height: 100%;" id="iframe_' +
                    comment_id +
                    '"></iframe>';
                $(modal_body).append(content);
            }
            ;
            $(modal_id).modal('show');
        }
    </script>
{% endblock %}